<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<!--
  Uses "almost standards mode", standard except for some table cell sizing.
  -->
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Prooftoys - simple algebra</title>
  <link id=styles type="text/css" rel="stylesheet" href="logic.css">
  <link type="text/css" rel="stylesheet" href="oli-style.css">
  <script src="boilerplate.js"></script>

<style type="text/css">
/* CSS here */
</style>

</head>
<body style="font-size: larger">

<center><h2 style="margin-top: 4em">Rearranging Expressions</h2></center>

<table style="width: 80%; margin-left: 120px">
<tr>
<td id=xxleftNav>
<!-- Boilerplate HTML COULD go here -->

<td style="vertical-align: top">
<div class="content shadowTwo" style="padding: .5em 2em; min-height: 30em">
<h3>learn by doing</h3>
<p style="margin: 0em">
Put the expression below into the form <s>(a * x) + b</s>
<div id=proofEditor></div>
<p>
<input class=checkAnswer type=button value="Check Answer"
     style="font-size: larger">
<input type=button value="New Problem"
    onclick="location.reload()"
     style="font-size: larger">
<p>
<span id=errorDisplay style="color: red"></span>
</div>

</td>
</table>

<!-- Storage for state to preserve across page unloads -->
<textarea id=ToyStore rows=20 cols=80 class=hidden></textarea>

<!-- END OF HTML -->

<script>
// Insert boilerplate.
Toy.insertNav();
Toy.insertSlogans();
Toy.mathifyAll();

jQuery(function() {
  // For debugging (and inline event handlers).
  window.Toy = Toy;

  // Proof editor node
  var editor = new Toy.ProofEditor();
  $('#proofEditor').append(editor.containerNode);
  window.proofEditor = editor;
  editor.setEditable(true);
  editor.showProofButtons(false);
  // Override default settings.
  Toy.simplifiedSelections = true;
  Toy.modes.subproofs = false;

  function random(min, max) {
    var range = max - min + 1;
    var r = Math.floor(range * Math.random()) + min;
    return r;
  }

  // Prevent all but the directly relevant rules from being offered
  // by autocompletion.
  var rules = Toy.rules;
  for (var key in rules) {
    var value = rules[key];
    if (!key.match(/^(assoc|commut|arithmetic$|distrib|group$|display$)/)) {
      info = value.info;
      value.info.saveForm = value.info.form;
      delete value.info.form;
    }
  };

  // Create an initial proof step:
  var c1 = random(2, 10);
  var c2 = random(2, 10);
  var term0 = Toy.parse('c1 * (c2 + x)');
  var term1 = term0.subFree(Toy.constify(c1 + ''), 'c1');
  var term = term1.subFree(Toy.constify(c2 + ''), 'c2');
  var step = rules.consider(term);
  editor.addStep(step);

  function checkAnswer() {
    var steps = editor.__mainControl.steps;
    var answer = steps[steps.length - 1];
    window.answer = answer;
    window.schema = Toy.parse('h ==> v = ((a * x) + b)');
    var map = answer.matchSchema(window.schema);
    window.map = map;
    console.log(Toy.debugString(map));

    // Test the result.

    // Schema must match.
    if (!map) { return false; }

    var aOk = map.a.getNumValue() === c1;
    if (!aOk) { return 'Coefficient a is not ' + c1; }

    var xOk = map.x.isVariable() && map.x.name === 'x';
    if (!xOk) { return 'First term does not have form a * x' ; }

    var bOk = map.b.getNumValue() === c1 * c2;
    if (!bOk) { return 'Term b is not ' + (c1 * c2); }

    return true;
  };

  var errorNode = $('#errorDisplay');

  $('.checkAnswer').click(function(event) {
      event.stopPropagation();
      var status = checkAnswer();
      var message = status;
      if (typeof message !== 'string') {
        message = message
          ? 'Answer is Correct!'
          : 'Incorrect, please try again';
      }
      errorNode.html(message);
      errorNode.css('color', status === true ? 'green' : 'red');
    });

  $('body').mousedown(function(event) {
      errorNode.html('');
    });

});

</script>
</body>
</html>
